<template>
  <view class="content">
    <view class="info-content">
      <u-cell size="large" title="印章名称" :value="form.sealName"></u-cell>
      <u-cell size="large" title="用印说明" :value="form.applicationRemark"></u-cell>
      <u-cell size="large" title="用印材料">
        <template #label>
          <u-upload :fileList="fileList1" :deletable="false" accept="all"/>
        </template>
      </u-cell>
      <u-cell size="large" title="审批阶段" :value="approvalStageOption.find(i => i.dictValue === form.approvalStage).dictLabel"></u-cell>
      <u-cell size="large" title="审批状态" :value="approvalStatusOption.find(i => i.dictValue === form.approvalStatus).dictLabel"></u-cell>
      <view class="approvalLogAction">
        <u-cell size="large" title="审批记录">
          <template #label>
            <u-cell
              v-for="item in approvalLogs" :key="item.id"
              :border="false"
              :title="approvalLogActionOption.find(i => i.dictValue === item.action).dictLabel"
              :value="$u.timeFrom(new Date(item.createTime).getTime(), 'yyyy-mm-dd')"
              center
              :titleStyle="`color: ${ ['grid_approve', 'secretary_approve'].includes(item.action) ? '#67c23a' : '#f56c6c' }`"
            >
              <template #label>
                <view v-if="['grid_reject', 'secretary_reject'].includes(item.action)" class="opinion">{{ item.opinion }}</view>
              </template>
            </u-cell>
          </template>
        </u-cell>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import sealApplyApi from '../request/api/sealApply'
import toolApi from '../request/api/tool'
import config from '../request/config'
import { getFileNameWithExtension } from '../utils/index' 
export default {
  options: { styleIsolation: 'shared' },
  data() {
    return {
      sealApplyId: '',
      form: {},
      fileList1: [],
      // 审批记录
      approvalLogs: [],
      // 审批记录状态
      approvalLogActionOption: [],
      // 审批状态
      approvalStatusOption: [],
      // 审批阶段
      approvalStageOption: [],
    }
  },
  computed: {
    ...mapGetters('userInfo', ['user']),
  },
  onLoad(option) {
    this.sealApplyId = option.id
    this.getDetail()
    this.getApprovalLog()

    toolApi.getDicts('approval_log_action').then(res => {
      this.approvalLogActionOption = res.data
    })

    toolApi.getDicts('approval_status').then(res => {
      this.approvalStatusOption = res.data
    })

    toolApi.getDicts('approval_stage').then(res => {
      this.approvalStageOption = res.data
    })
  },
  // 下拉刷新
  async onPullDownRefresh() {
    await this.getDetail()
    uni.stopPullDownRefresh()
  },
  methods: {
    async getDetail() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        var { data } = await sealApplyApi.getSealApplyDetail(this.sealApplyId)
      } finally {
        uni.hideLoading()
      }
      this.form = data
      this.fileList1 = data.sealMaterials.split(',').map(path => {
        return {
          url: config.baseUrl + path,
          name: getFileNameWithExtension(path),
        }
      })
    },
    // 获取审批记录
    async getApprovalLog() {
      try {
        var { data } = await sealApplyApi.getApprovalLog(this.sealApplyId)
      } finally {
        uni.hideLoading()
      }
      this.approvalLogs = data.filter(item => item.action !== 'submit')
    }
  },
  onShareAppMessage() {
    return {
      title: this.form.sealName,
      path: `/sealApply/detail?id=${ this.form.id }`, // 分享路径
    }
  }
}
</script>

<style>
.info-content .u-cell__value {
  width: 70%;
}
.approvalLogAction .u-cell__value {
  width: unset;
}
.u-upload__button {
  display: none !important;
}
</style>

<style scoped lang="scss">
.opinion {
  font-size: 28rpx;
}
</style>
